<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/echarts/src/echarts.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/echarts/src/echarts.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>&lt;/div>
&lt;/template>

&lt;script>
/**
 * ECharts图表覆盖物组件
 * @module xdh-map-echarts
 */

import { getParent, mapReady } from 'utils/util'
import CleanMixin from 'utils/mixins/clean'
import createCoordSystem from 'utils/plugins/CoordSystem'
import { convertToWgs84 } from 'utils/convert'
export default {
  name: 'XdhMapEcharts',
  mixins: [CleanMixin],
  /**
   * 参数属性
   * @member props
   * @property {object} lib ECharts类库
   * @property {object} options ECharts实例化参数选项，涉及到 coordinateSystem 需要设置为 ol
   */
  props: {
    // ECharts类库
    lib: {
      type: Object,
      required: true
    },
    // ECharts 配置参数
    options: Object
  },
  inject: ['coordType'],
  watch: {
    options() {
      this.postRender()
    }
  },
  methods: {
    // 由于Openlayers与Echarts的click事件有冲突，Echarts触发不了click事件, 需要用mouse事件触发click
    fixClickEvent() {
      if (!this.map || !this.chart) return

      this.proxyMapHandleClick = e => {
        if (this.eventData) {
          this.$emit('click', this.eventData)
        }
      }
      this.proxyChartMouseOver = e => {
        this.eventData = e
      }
      this.proxyChartMouseOut = e => {
        this.eventData = null
      }
      this.map.on('click', this.proxyMapHandleClick)
      this.chart.on('mouseover', this.proxyChartMouseOver)
      this.chart.on('mouseout', this.proxyChartMouseOut)
    },
    postRender() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.registerCoordinateSystem()
        const el = this.createContainer()
        const chart = this.createChart(el)
        chart.setOption(this.options || {})
        this.resize(chart)
      }, 100)
    },
    resize(chart) {
      if (!this.container || !this.map) return

      const map = this.map
      const size = map.getSize()
      Object.assign(this.container.style, {
        height: size[1] + 'px',
        width: size[0] + 'px'
      })
      chart.resize()
    },
    createContainer() {
      if (!this.map) return
      if (this.container) return this.container

      const map = this.map
      const size = map.getSize()
      const div = document.createElement('div')
      Object.assign(div.style, {
        height: size[1] + 'px',
        width: size[0] + 'px',
        top: 0,
        left: 0,
        zIndex: 999,
        position: 'absolute'
      })

      this.container = div
      map.getViewport().appendChild(div)

      return this.container
    },
    registerCoordinateSystem() {
      if (!this.map || this.registered) return
      const coordSystem = createCoordSystem(this.map)
      this.lib.registerCoordinateSystem('ol', coordSystem)
      this.registered = true
    },
    createChart(el) {
      if (this.chart) return this.chart
      this.chart = this.lib.init(el)
      this.fixClickEvent()
      Object.keys(this.$listeners).forEach(key => {
        this.chart.on(key, this.$listeners[key])
      })
      return this.chart
    },
    ready(map) {
      this.map = map
      this.map.on('postrender', this.postRender)
    }
  },
  created() {
    this.parent = getParent.call(this)
    mapReady.call(this, this.ready)
    this.options.series.forEach(d => {
      // 根据坐标类型进行坐标转换，echart需要通过转换传入的坐标数据实现
      if (((d.data[0] || {}).value || []).length > 2) {
        d.data.forEach(m => {
          ;[m.value[0], m.value[1]] = convertToWgs84(this.coordType, [
            m.value[0],
            m.value[1]
          ])
        })
      }
    })
  },
  beforeDestroy() {
    clearTimeout(this.timer)

    if (this.chart) {
      this.chart.off('mouseover')
      this.chart.off('mouseout')
      Object.keys(this.$listeners).forEach(key => {
        this.chart.off(key)
      })
      this.chart.dispose()
    }
    if (this.container) {
      this.container.parentNode.removeChild(this.container)
      this.container = null
    }
    if (this.map) {
      this.map.un('click', this.proxyMapHandleClick)
      this.map.un('postrender', this.postRender)
    }
  }
}
&lt;/script>

</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li></ul><h3>Classes</h3><ul><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue May 21 2019 17:27:18 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
